// const main = document.querySelector('main');

// const navBtns = document.querySelectorAll('header nav li');
// navBtns.forEach((navBtn) =>{
//     navBtn.addEventListener('click',function(){
//     const active = document.querySelector('header nav li.active');
//     if(active){
//         active.classList.remove("active");
//     }
//     navBtn.classList.add('active');
// });
// });



// navBtns[0].onclick = function(){
//     main.innerHTML = '',
//     ajax_get('data/home.json');
// }
// navBtns[0].onclick();

// navBtns[1].onclick = function(){
//     main.innerHTML = '',
//     ajax_get('data/home.json');
// }

// navBtns[2].onclick = function(){
//     main.innerHTML = '',
//     ajax_get('data/home.json');
// }

// /****
//  * AJAX请求
//  * @param{Sting}url数据请求
//  */
// function ajax_get(url){
//     const xhr = new XMLHttpRequest();
//     xhr.open('GET',url);
//     xhr.send();
//     xhr.onreadystatechange = () =>{
//         if(xhr.readyState === 4 && xhr.status ===200){
//             const res = JSON.parse(shr.readyState);
//             for(const key in res){
                
//                     if(key ==='banner'){
//                         main,innerHeight  +=
//                         `<div>
//                         <img scr="${res[key]}">
//                         </div>`;
//                     }
//                     else{
//                         main.innerHTML += `<div>${res[key]}</div>`;
//                     }
//                 }
//             }
//         }
//     }

const main = document.querySelector('main');

const navBtns = document.querySelectorAll('header nav li');
navBtns.forEach((navBtn) => {
    navBtn.addEventListener('click', function() {
        const active = document.querySelector('header nav li.active');
        if(active) {
            active.classList.remove('active');
        }
        navBtn.classList.add('active');
    });
});

navBtns[0].onclick = function() {
    main.innerHTML = '';
    ajax_get('data/home.json');
}
navBtns[0].onclick();

navBtns[1].onclick = function() {
    main.innerHTML = '';
    ajax_get('data/news.json');
}

navBtns[2].onclick = function() {
    main.innerHTML = '';
    ajax_get('data/other.json');
}

/**
 * AJAX请求
 * @param { String } url 请求数据的地址
 */
function ajax_get(url) {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.send();
    xhr.onreadystatechange = () => {
        if(xhr.readyState === 4 && xhr.status === 200) {
            const res = JSON.parse(xhr.response);
            for(const key in res) {
                if(key === 'banner') {
                    main.innerHTML +=    
                        `<div>
                            <img src="${res[key]}">
                        </div>`;
                }
                else {
                    main.innerHTML += `<div>${res[key]}</div>`;
                }
            }
        }
    }
}
